<!-- template for the modal component -->
<template>
    <transition name="modal" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">

        <div class="modal" style="display: block;">
            <div class="modal-dialog inmodal" v-bind:class="modalSizeClass">
                <div class="mobile-backend">
                    <div class="wx_phone">
                    <div class="mobile-head">
                        {{ modalTitle }}
                        <span  class="pull-right " @click="$emit('cancel')">关闭</span>
                    </div>
                    <div class="mobile-body">
                        <slot></slot>
                    <!--</div>-->
                    <!--<div class="modal-footer">-->
                        <!--<slot name="footer">-->
                            <!--<button type="button" class="btn btn-default" @click="$emit('cancel')">取消</button>-->
                            <!--<button type="button" class="btn btn-primary" @click="$emit('ok')">确定</button>-->
                        <!--</slot>-->
                    </div>
                    </div>
                </div>

            </div>

        </div>
    </transition>


</template>

<script>
    module.exports = {
        props: {
            modelSize: {
                type: String,
                default: ''
            },
            modalTitle: {
                type: String,
                default: 'Modal title'
            },
            elId: {
                type: String,
                default: 'el_' + Math.random().toString(36).slice(2)
            },
        },
        data: function () {
            return {
//                elId:''
//                showModal: false,
            };
        },
        mounted: function () {
            $('body').addClass("modal-open");
            $('body').css("padding-right",'15px');
            $('body').append('<div class="modal-backdrop fade in" id="'+this.elId+'"></div>');
        },
        destroyed: function () {
            $('#'+this.elId).remove();
            let model = $('.modal-backdrop');
            if(!model.length){
                $('body').removeClass("modal-open");
                $('body').css("padding-right",'');
            }

        },
        computed: {
            modalSizeClass: function () {
                return {
                    'modal-lg': this.modelSize == 'large',
                    'modal-sm': this.modelSize == 'small'
                }
            }
        }
    }
</script>